What is the default folder structure in a Next.js 13+ (App Router) project?

The default folder structure centers around an 'app' directory with file-based routing, where folders define routes and special files define the UI behavior

Next.js 13 introduced the App Router as a new approach to building applications, built on React Server Components. The App Router uses a file-system based router where the structure of folders and files inside the 'app' directory directly defines your application's routes and behavior. This convention-over-configuration approach eliminates the need for manual route setup and provides built-in support for layouts, loading states, error handling, and more .

Default Folder Structure (Next.js 15)

Core Special Files in the App Router

1
layout.tsx: Defines shared UI that wraps around page content. The root layout (app/layout.tsx) is required and must contain <html> and <body> tags. Layouts are not re-rendered during navigation, making them efficient for persistent elements like headers and footers .
2
page.tsx: Represents the unique UI for a route. Every route segment that should be publicly accessible must contain a page.tsx file. These are Server Components by default.
3
loading.tsx: Creates a loading UI (automatically wrapped in a Suspense boundary) that displays while the page content is loading. This improves perceived performance by showing immediate feedback .
4
error.tsx: Defines a custom error UI that catches errors in the route segment. Must be a Client Component (use 'use client') and receives 'error' and 'reset' props .
5
not-found.tsx: Displays a custom 404 page when a route is not found or when the notFound() function is called .
6
route.ts: Creates custom API endpoints (replacing pages/api in the Pages Router). Allows handling different HTTP methods (GET, POST, etc.) .
7
template.tsx: Similar to layout.tsx but creates a new instance on each navigation, useful for animations or state that should reset between routes .
8
global-error.tsx: A fallback error UI that wraps the entire application. Only used in production and must include its own <html> and <body> tags .

Route groups, created by wrapping folder names in parentheses like (marketing), allow you to organize routes logically without affecting the URL structure. This is particularly useful for separating sections like marketing pages, authentication flows, or admin areas while maintaining clean URLs like /about and /login instead of /marketing/about or /auth/login . Additionally, you can use private folders by prefixing folder names with an underscore (e.g., _components) to indicate they are for internal organization and should not be treated as routes .

Dynamic routes are created using square brackets in folder names, such as [slug] or [id]. This captures URL parameters that can be accessed in your page component via the params prop. For catch-all routes, you can use [...slug] to match multiple path segments, or [[...slug]] for optional catch-all routes. These patterns enable flexible content structures like blog posts, product pages, or any parameterized content .

Additional Directories and Files

1
public/: Stores static assets like images, fonts, and files that need to be publicly accessible. Files here are served at the root URL (e.g., /images/logo.png) .
2
src/: An optional directory for source code. If used, the app directory should be placed inside src/app/ .
3
middleware.ts: Located at the project root, this file allows you to run code before requests complete, useful for authentication, redirects, and rewriting URLs .
4
api/: A convention for API routes within the app directory, with route.ts files handling server-side logic for endpoints like /api/hello .

Difficulty: 2/10

Topics: app directory, routing conventions, layout hierarchy

Scenario Questions

0-2 years experience

1
You need a new page at /dashboard in a fresh Next.js 13 project using the App Router. Where do you create the file and what do you name it?
2
After adding about/page.tsx you still get a 404 for /about. What folder might be missing or misnamed?
3
If you want a header that appears on every page, which file would you add and where would it live?

2-5 years experience

1
Your team wants a nested route /products/[id]/reviews. Describe the folder hierarchy you would create under app and any special files needed for loading states.
2
During a review you see a layout.tsx placed inside app/api. Why could that cause unexpected behavior, and how would you correct it?
3
Static images referenced in a component inside app aren't loading from public. What folder‑structure issue might be causing this?

5-8 years experience

1
We are building a large e‑commerce site with multiple teams owning different sections. How would you organize the app directory to enable independent deployment, shared layouts, and avoid route collisions?
2
A performance regression appeared after adding app/profile/settings/page.tsx. Explain how the default hierarchy could affect server‑side rendering and what refactoring you might consider.
3
Discuss the trade‑offs of placing shared UI components inside app/components versus a top‑level components folder in a monorepo.

8+ years experience

1
Our organization is migrating from the legacy pages router to the App Router across many micro‑frontends. What strategy would you propose for restructuring the folder layout to minimize disruption and keep consistency?
2
How would you define a company‑wide convention for the app directory that balances flexibility for feature teams with enforceable standards for SEO, accessibility, and testing?
3
When integrating a third‑party CMS that generates dynamic routes, how does the default Next.js 13 folder structure need to adapt, and what edge cases should we anticipate?

Follow-up Questions

❓How would you add a global layout that wraps every page?
❓What happens if you place a `page.tsx` directly under `app` without a subfolder?
❓Can you explain how the `loading.tsx` file fits into this structure?